<template>
	<view class="app-pages">
		<view class="time">
			<view class="date">
				<view class="">{{options.time[0] | dateFormat}}</view>
				<u-icon name="minus" color="rgb(144, 147, 153)" size="24" :customStyle="{margin:'0 12rpx'}"></u-icon>
				<view class="">{{options.time[options.time.length - 1] | dateFormat}}</view>
			</view>
			<view class="">共{{options | MONEY_DAY}}晚</view>
		</view>

		<view class="introduce">
			<view class="shop">
				<image class="image" :src="options.imageUrl" mode="aspectFill"></image>
				<view class="">
					<view class="shop-title">{{options.goodsName||''}}</view>
					<view class="shop-tips">{{options.f2||''}}</view>
				</view>
			</view>
			<view class="introduce-btn tips" @click="handleUPopupShow">订房必读</view>
		</view>

		<view class="room">
			<view class="title">订房信息</view>
			<u-number-box v-model="value" :max="options.maxInventory" @overlimit="handleOverlimit" disabled>
				<view slot="minus" class="minus">
					<!-- <u-icon name="minus" size="12" color="rgb(144, 147, 153)"></u-icon> -->
				</view>
				<text slot="input" style="width: 60rpx;text-align: center;" class="input">{{value}}间</text>
				<view slot="plus" class="plus">
					<!-- <u-icon name="plus" color="#FFFFFF" size="12"></u-icon> -->
				</view>
			</u-number-box>
		</view>

		<u--form labelPosition="left" :model="form" :rules="formRules" ref="uForm" label-width="200rpx">
			<u-form-item :prop="'arr.'+index+'.userName'" borderBottom v-for="(item,index) in form.arr" :key="index"
				label-width="0rpx">
				<view class="">
					<view class="form-item">
						<view class="" style="width: 200rpx;">
							{{'房间'+(index+1)}}
						</view>
						<view class="flex-input">{{item.userName}}</view>
					</view>
				</view>
			</u-form-item>

			<u-form-item label="+ 86" :borderBottom="false">
				<text>{{form.userPhone}}</text>
			</u-form-item>

			<!-- <u-form-item label="预计到店时间" :borderBottom="false" :customStyle="{margin:'10rpx 0'}">
				<view class="flex-space">
					<view class="">{{form.arrivrTime}}</view>
					<u-icon name="arrow-right" color="rgb(144, 147, 153)" size="14"></u-icon>
				</view>
			</u-form-item> -->

			<u-form-item label="特殊要求" :borderBottom="false">
				<view style="width: 500rpx;word-break: break-all;">{{form.remark}}</view>
			</u-form-item>
		</u--form>
		
		<view class="detailed">
			<view class="title">订单明细</view>
			<view class="detailed-item" v-for="(item,index) in priceDetail" :key="index">
				<view class="tips1">{{item.times}}</view>
				<view class="tips2">￥{{item.price}}</view>
			</view>
			
			<view class="detailed-item">
				<view class="tips1">总价</view>
				<view class="tips2">￥{{priceDetail | priceDetailTotal}}</view>
			</view>
		</view>

		<!-- 订房必读 -->
		<u-popup :show="uPopupShow" mode="bottom" round="10" :closeOnClickOverlay="true">
			<view class="popup-1">
				<view class="title">
					<view class=""></view>
					<view style="display: flex; align-items: center;">
						<u-icon name="error-circle" size="28rpx" color="#FF4040"></u-icon>
						<text style="margin-left: 12rpx;">订房必读</text>
					</view>
					<view class="close-icon">
						<u-icon @click="handleClose" name="close-circle" size="34rpx" color="rgb(144, 147, 153)">
						</u-icon>
					</view>
				</view>

				<blockquote v-for="item in readingListData" :key="item.configId" style="margin-bottom: 16rpx;">
					<view class="label">{{item.title}}</view>
					<view class="content" v-html="item.content"></view>
				</blockquote>
			</view>
		</u-popup>


	</view>
</template>
<script>
	import {
		hotelOrderAddHotelOrder,
		hotelReadingList,
		goodsIdDetails,
		orderManageId
	} from "@/http";
	import icon from "../../uni_modules/uview-ui/libs/config/props/icon";
	export default {
		data() {
			return {
				uPopupShow: false,
				show: false,
				show1: false,
				columns: [
					['12:00', '13:00', '14:00', '15:00', '16:00', '17:00']
				],
				value: 1,
				value1: '',
				index: 0,
				form: {
					arr: [{
						userName: ''
					}],
					userPhone: '',
					remark: '',
					arrivrTime: '16:00'
				},
				formRules: {
					userName: {
						required: false,
						message: '请输入姓名',
						trigger: 'bulr'
					},
					userPhone: {
						required: false,
						message: '请输入手机号',
						trigger: 'bulr'
					}
				},
				options: {
					time: []
				},
				readingListData: [],
				selectorData:[],
				priceDetail:[]
			}
		},
		watch: {
			value(numbz) {
				this.resFn(numbz)
			}
		},
		async onLoad(data) {
			uni.setNavigationBarTitle({
				title: '梅地亚中心'
			});
			this.options = JSON.parse(data.options);
			this.getSelectorData(this.options.time);
			this.resFn(1);
			// 订房必读
			let res1 = await hotelReadingList();
			this.readingListData = res1.data.rows;
			let res2 = await orderManageId(this.options.storeOrderId);
			console.log('查看内容：',res2)
			this.priceDetail = res2.data.data.priceDetail
			
			let orderContent = uni.getStorageSync('order_content');
			if (!orderContent) return;
			this.form.arr = orderContent.userName.split(",").map(userName => {
				return {
					userName
				};
			});
			this.value = this.form.arr.length;
			this.form.userPhone = this.options.arrivePhone;
			this.form.remark = orderContent.remark;
			this.form.arrivrTime = this.dateFormat(new Date(orderContent.arrivrTime), 'HH:MM');
			
			// 清空
			uni.setStorageSync('order_content', '');
		},
		methods: {
			handleUPopupShow(){
				this.uPopupShow = true;
				if(!this.readingListData) return uni.showToast({
					title:"当前没有配置内容",
					icon:"none"
				})
				
				if(!this.readingListData.length) return uni.showToast({
					title:"当前没有配置内容",
					icon:"none"
				})
			},
			getSelectorData(time){
				console.log("时间",time)
				let startTime = new Date(time[0]);
				let endTime = this.dateFormat(time[1],"YYYY-mm-dd");
				
			},
			handleClose(){
				this.uPopupShow = false;
			},
			handleOverlimit(options) {
				console.log('不尽其：', options)
				if (options == 'plus') return uni.showToast({
					title: "您选购的房型库存不足，不能再加啦",
					icon: "none"
				});
			},
			resFn(numbz) {
				let numb = numbz;
				let arr = [];
				for (let i = 0; i < numb; i++) {
					if (this.form.arr[i]) {
						arr.push(this.form.arr[i])
					} else {
						arr.push({
							userName: ''
						})
					}
				};
				this.form.arr = arr;
			},
			dateFormat(date, fmt = "YYYY-mm-dd") {
				if (!date) return '';
				date = new Date(date);
				let ret;
				const opt = {
					"Y+": date.getFullYear().toString(), // 年
					"m+": (date.getMonth() + 1).toString(), // 月
					"d+": date.getDate().toString(), // 日
					"H+": date.getHours().toString(), // 时
					"M+": date.getMinutes().toString(), // 分
					"S+": date.getSeconds().toString() // 秒
					// 有其他格式化字符需求可以继续添加，必须转化成字符串
				};
				for (let k in opt) {
					ret = new RegExp("(" + k + ")").exec(fmt);
					if (ret) {
						fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
					}
				}
				return fmt;
			},
			MONEY_DAY_md(options) {
				if(!options && !options.inTime && !options.outTime) return "";
				const time = (date1, date2) => {
					let numb = date2.getTime() - date1.getTime();
					let min = numb / 1000 / 60;
					let s = numb / 1000;
					let hours = numb / 1000 / 60 / 60;
					let day = numb / 1000 / 60 / 60 / 24;
					let mon = numb / 1000 / 60 / 60 / 24 / 30;
					return `${Math.ceil(day)}`
				};
				return time(new Date(options.inTime), new Date(options.outTime));
			},
		},
		filters: {
			priceDetailTotal(arr){
				let total = 0
				arr.forEach(item => {
					total = total + Number(item.price)
				});
				return total;
			},
			MONEY_DAY(options) {
				if(!options && !options.inTime && !options.outTime) return "";
				const time = (date1, date2) => {
					let numb = date2.getTime() - date1.getTime();
					let min = numb / 1000 / 60;
					let s = numb / 1000;
					let hours = numb / 1000 / 60 / 60;
					let day = numb / 1000 / 60 / 60 / 24;
					let mon = numb / 1000 / 60 / 60 / 24 / 30;
					return `${Math.ceil(day)}`
				};
				return time(new Date(options.inTime), new Date(options.outTime));
			},
			dateFormat(date) {
				if (!date) return '';
				let fmt = "mm月dd日";
				date = new Date(date);

				let week = function() {
					var day = date.getDay();
					var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
					var week = weeks[day];
					return week
				}();
				let ret;
				const opt = {
					"Y+": date.getFullYear().toString(), // 年
					"m+": (date.getMonth() + 1).toString(), // 月
					"d+": date.getDate().toString(), // 日
					"H+": date.getHours().toString(), // 时
					"M+": date.getMinutes().toString(), // 分
					"S+": date.getSeconds().toString() // 秒
					// 有其他格式化字符需求可以继续添加，必须转化成字符串
				};
				for (let k in opt) {
					ret = new RegExp("(" + k + ")").exec(fmt);
					if (ret) {
						fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
					}
				}
				return fmt + " " + week;
			}
		}
	}
</script>
<style lang="scss" scoped>
	.detailed{
		.title{
			color: #333333;
			font-size: 30rpx;
			font-weight: bold;	
			padding: 30rpx 0;
		}
		.detailed-item{
			&+ .detailed-item{
				margin-top: 30rpx;
			}
			display: flex;
			align-items: center;
			justify-content: space-between;
			.tips1,.tips2{
				color: #666666;
			}
			.tips2{
				margin-left: 80rpx;
			}
		}
	}
	.popup-1 {
		padding: 20rpx 30rpx 20rpx 50rpx;
		box-sizing: border-box;
		min-height: 520rpx;

		.title {
			position: relative;
			color: #333333;
			font-size: 30rpx;
			font-weight: bold;
			margin-bottom: 40rpx;
			width: 100%;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.label {
			font-size: 28rpx;
			font-weight: bold;
			position: relative;
			padding-bottom: 8rpx;

			&::after {
				content: "";
				position: absolute;
				top: 50%;
				left: -20rpx;
				transform: translate(0, -50%);
				border-radius: 50%;
				background-color: #333333;
				width: 8rpx;
				height: 8rpx;
			}
		}

		.content {
			font-size: 26rpx;
			color: #333333;
		}
	}

	.flex-input {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex: 1;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.tips {
		// padding-top: 20rpx;
		// font-size: 26rpx;
		color: #F59A23;
	}

	.popup {
		width: 700rpx;

		.cell {
			box-shadow: none;
			margin-top: 0;

			.label {
				padding-left: 30rpx;
				padding-top: 20rpx;
			}

			.padding {
				padding: 0 40rpx;
			}
		}
	}

	.flex-space {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.flex-right {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.submit {
		padding: 10rpx 25rpx;
		border-radius: 4rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		background-color: #f74062;
	}

	.form-item-tips {
		font-size: 22rpx;
		color: rgba(255, 110, 0, 1);
		background-color: rgba(255, 110, 0, 0.1);
		padding: 14rpx 10rpx;
		margin-left: 10rpx;
		margin-top: 20rpx;
		display: inline-block;
	}

	.room {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 40rpx 0;

		.title {
			font-weight: bold;
			font-size: 30rpx;
		}
	}

	.introduce {
		display: flex;
		margin: 20rpx 0 30rpx 0;
		align-items: flex-end;
		justify-content: space-between;
		.shop{
			display: flex;
			.image{
				width: 260rpx;
				height: 180rpx;
				margin-right: 60rpx;
			}
			.shop-title{
				font-weight: bold;
				font-size: 30rpx;
				margin-top: 20rpx;
			}
			.shop-tips{
				font-size: 26rpx;
				margin-top: 16rpx;
			}
		}

		.introduce-btn {
			font-weight: bold;
		}
	}
	.time {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 30rpx;

		.date {
			display: flex;
			align-items: center;
		}
	}



	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
		white-space: nowrap;
	}
</style>
